<template>
  <div class="task-list">
    <el-card class="box-card">
      <!-- 任务类型标签页 -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="全部任务" name="all"></el-tab-pane>
        <el-tab-pane label="我的任务" name="my"></el-tab-pane>
        <el-tab-pane label="我的验收" name="check"></el-tab-pane>
      </el-tabs>

      <!-- 操作按钮和搜索栏 -->
      <div class="operation-bar">
        <div class="left-buttons">
          <el-button type="primary" size="small" @click="Zhi">执行任务</el-button>
          <el-button type="success" plain size="small">导出</el-button>
        </div>
        <div class="right-search">
          <el-input v-model="searchKey" placeholder="请输入任务编号或名称" size="small" style="width: 250px">
            <el-button slot="append" icon="el-icon-search"></el-button>
            <el-button slot="append" icon="el-icon-refresh"></el-button>
          </el-input>
        </div>
      </div>

      <!-- 任务列表表格 -->
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" style="color: #67C23A" @click="handleView(scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="taskNo" label="任务编号" width="120">
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称" min-width="150">
        </el-table-column>
        <el-table-column prop="taskType" label="任务类型" width="120">
        </el-table-column>
        <el-table-column prop="planName" label="计划名称" min-width="150">
        </el-table-column>
        <el-table-column prop="planNo" label="任务计划序号" width="120">
        </el-table-column>
        <el-table-column prop="startTime" label="任务计划开始时间" width="160">
        </el-table-column>
        <el-table-column prop="endTime" label="任务计划结束时间" width="160">
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TaskList',
  data() {
    return {
      activeTab: 'my',
      searchKey: '',
      tableData: [
        {
          index: 1,
          taskNo: 'T001',
          taskName: '润滑油更换',
          status: '待执行',
          taskType: '计划任务',
          planName: '日计划',
          planNo: '02',
          startTime: '2025-07-12 10:30',
          endTime: '2025-07-12 12:30'
        },
        // ... 更多数据
      ],
      currentPage: 1,
      pageSize: 10,
      total: 45,
      selectedRows: []
    }
  },
  methods: {
    Zhi() {
      this.$router.push({ path: "/equipment/maintenance/renwu/xin" });
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleView(row) {
      // this.$message.info(`查看任务：${row.taskNo}`)
      this.$router.push({ path: "/equipment/maintenance/renwu/cha" });
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 实现获取数据的逻辑
    },
    getStatusType(status) {
      const statusMap = {
        '待执行': 'warning',
        '保养中': 'primary',
        '已完成': 'success',
        '待验收': 'info',
        '通期1天': 'danger',
        '通期3天': 'danger'
      }
      return statusMap[status] || ''
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 1200px;

}

.task-list {
  padding: 20px;
}

.operation-bar {
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-buttons {
  display: flex;
  gap: 10px;
}

.el-table {
  margin-bottom: 20px;
}

.pagination-container {
  text-align: right;
  padding: 10px 0;
}

.el-tag {
  min-width: 60px;
}

/* 状态标签样式 */
.el-tag--warning {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}

.el-tag--success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

.el-tag--danger {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .task-list {
    padding: 10px;
  }

  .operation-bar {
    flex-direction: column;
    gap: 10px;
  }

  .right-search {
    width: 100%;
  }

  .el-input {
    width: 100% !important;
  }

  .pagination-container {
    text-align: center;
  }
}
</style>
